<template>
  <div class="packageDetails">
    <!-- 头部 -->
    <div class="package_top">
      <div>
        <van-icon class="van-icon1" name="arrow-left" />
      </div>
      <div class="div1">套餐详情</div>
    </div>
    <!-- 中间 -->
    <div class="package-center">
      <div class="center-img"></div>
      <div class="center-text">
        <div >老年人体检套餐豪华版</div>
        <div class="text-bottom">
          <span>￥998</span>
          <span style="color:#999999">已有label人购买</span>
        </div>
       
      </div>
    </div>
    <!-- 下边 -->
    <div class="package-bottom">
      <van-tabs v-model="active">
        <van-tab class="van-tab1" title="图文详情">
          <!-- 套餐介绍 -->
          <div class="package-desc">
            <span class="span1">套餐介绍</span>
            <p>60岁以上的女性长者，为相关可是诊断提供重要依据</p>
          </div>
          <!-- 使用规则 -->
          <div class="package-rule">
            <span class="span2">使用规则</span>
            <p>1.请至少一天预定</p>
            <p>2.线上预约完成后，体检日请拿上身份证带医院前台登记</p>
            <p>3.医院提供营养在早餐一份</p>
            <p>1.请至少一天预定</p>
            <p>2.线上预约完成后，体检日请拿上身份证带医院前台登记</p>
            <p>3.医院提供营养在早餐一份</p>
          </div>
        </van-tab>
        <van-tab title="体检项目">
          <!-- 体检项目 -->
          <table border="1" class="tables">
            <tr>
              <td>项目名称</td>
              <td>一般情况</td>
            </tr>
            <tr>
              <td>检查范围</td>
              <td>身高，体重，血压，脉搏</td>
            </tr>
            <tr>
              <td>检查意义</td>
              <td>了解身体一般状况</td>
            </tr>
          </table>
          <table border="1" class="tables">
            <tr>
              <td>项目名称</td>
              <td>一般情况</td>
            </tr>
            <tr>
              <td>检查范围</td>
              <td>身高，体重，血压，脉搏</td>
            </tr>
            <tr>
              <td>检查意义</td>
              <td>了解身体一般状况</td>
            </tr>
          </table>
          <table border="1" class="tables">
            <tr>
              <td>项目名称</td>
              <td>一般情况</td>
            </tr>
            <tr>
              <td>检查范围</td>
              <td>身高，体重，血压，脉搏</td>
            </tr>
            <tr>
              <td>检查意义</td>
              <td>了解身体一般状况</td>
            </tr>
          </table>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 按钮 -->
    <div class="button-bottom">
      <span class="button-text">￥998.80</span>
      <van-button type="warning" style="width:50%;font-size:18px">购买预约</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      active: 2,
    }
  }
}
</script>

<style lang='scss'>
  .packageDetails{
    background-color: #f2f2f2;
    .package_top{
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      height: 40px;
      border-bottom: solid 1px #e4e4e4;
      .div1{
        display: inline-block;
        margin-left: 35%;
      }
      .van-icon1{
        font-size: 1.5em;
        margin-top: 5px;
      }
    }
    .package-center{
      margin-bottom: 5px;
      .center-img{
        height: 184px;
      }
      .center-text{
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        padding-left: 20px;
        height: 80px;
        background-color: #fff;
        .text-bottom{
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .package-bottom{
      height: 310px;
      overflow-y: auto;
      background-color: #fff;
      .van-tab:first-child{
        border-right: solid 1px !important;
      }
      .van-tab--active {
          color: #323233;
          font-weight: 500;
          // border-bottom: solid #00ccff 4px !important;
      }
      .van-tabs__line {
        background-color: #00ccff;
      }
      .van-tab1{
        margin-top: 15px;
        margin-left: 10px;
        // 套餐介绍
        .package-desc{
          .span1{
            color: #333333;
            font-weight: bold;
          }
        }
        .package-rule{
          .span2{
            color: #333333;
            font-weight: bold;
          }
        }
      }
      .tables{
        border-collapse:collapse;
        width: 90%;
        margin-left: 20px;
        margin-top: 20px;
        tr{
          height: 35px;
        }
      }
    }
    .button-bottom{
      background-color: #fff;
      border-top:solid 2px #ff6600;
      margin-top: 3%;
      .button-text{
        display: inline-block;
        width: 50%;
        color: #ff6600;
        text-align: center;
      }
    }
  }
</style>
